<template>
  <div class="ty-table">
    <el-form :inline="true" ref="tyForm" :model="formInline" class="demo-form-inline">
      <slot name="search" v-bind:param="formInline"></slot>
      <el-form-item v-if="searchFlag">
        <el-button type="primary" @click="refreshData()" icon="el-icon-zoom-in">查询</el-button>
        <el-button @click="resetForm('tyForm')" icon="el-icon-refresh">重置</el-button>
      </el-form-item>
      <slot name="search-operation"></slot>
    </el-form>

    <el-table
        :data="tableData"
        style="width: 100%"
        row-key="id"
        ref="table"
        :default-expand-all="false"
        :show-overflow-tooltip="true"
        :tree-props="{children: 'children'}"

        :header-cell-style="{ background: '#F7FAFF', color: '#000000' ,fontSize:'14px' ,fontWeight:600}"
        v-loading="tableLoading"
    >
      <slot name="table"></slot>
      <el-table-column
          align="center"
          fixed="right"
          :width="columnWidth"
          v-if="scopeFlag"
          label="操作">
        <template slot-scope="scope">
          <template>
            <slot name="extra" :row="scope.row"></slot>
            <el-button @click="openUpdate(scope.row)" type="text" v-if="updateFlag"
                       size="small">编辑
            </el-button>
            <el-button class="error-text-btn" type="text" size="small" v-if="deleteFlag"
                       @click="deleteCommon(scope.row , deleteApi ,getList )">删除
            </el-button>
          </template>

        </template>
      </el-table-column>
    </el-table>

    <div class="ty-page" v-if="paginationFlag">
      <el-pagination
          background
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page="formInline.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="formInline.limit"
          layout="sizes,prev, pager, next,total"
          :total="formInline.total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import {tyConfirmMixins} from "@/mixins/addEditFormMixins";

export default {
  name: "tyTable",
  mixins: [tyConfirmMixins],
  props: {
    listApi: Function,
    deleteApi: Function,
    afterList: Function,
      fixParamFunc : Function,
    // btnPermission: {
    //     type: Object,
    //     default:{
    //         edit:[],
    //         delete:[]
    //     }
    // },
    // paramData:{
    //     type: Object,
    // },
    // 分页开关
    paginationFlag: {
      type: Boolean,
      default: true
    },
    // 操作开关
    scopeFlag: {
      type: Boolean,
      default: true
    },
    // 编辑开关
    updateFlag: {
      type: Boolean,
      default: true
    },
    //删除开关
    deleteFlag: {
      type: Boolean,
      default: true
    },
    // 查询开关
    searchFlag: {
      type: Boolean,
      default: true
    },
    columnWidth: {
      type: Number | String,
      default: 100
    },
    // 删除时 需要的字段
    deleteRowList: {type: Array, default:()=> ['id']},
    // 重置时 需要过滤的 字段
    deleteResetFormList: {type: Array, default: null},
    // 重置回调
    resetBackFn: {},
    //查询初始字段
    paramObj: {type: Object, default: null},
    // 表单开关
    openDrawer: Function
  },
  data() {
    return {
      tableData: [],
      formInline: {
        page: 1,
        limit: 10,
        total: 0,
      },
      tableLoading: true,
      initParamData: {}
    }
  },
  methods: {
    getList() {
      this.tableLoading = true
        if(this.fixParamFunc != null){
            this.fixParamFunc(this.formInline)
        }
      this.listApi(this.formInline).then(res => {
        let list = res.records;
        if (this.afterList != null && list != null) {
          this.afterList(list)
        }
        this.tableData = list
        this.formInline.total = res.total
      }).finally(o => {
        this.tableLoading = false
        // loading.close();
      })
    },
    refreshData() {
      this.formInline.page = 1
      this.getList()
    },
    resetForm(formName) {
      // this.$refs[formName].resetFields();
      if (this.deleteResetFormList) {
        for (let i of this.deleteResetFormList) {
          delete this.formInline[i]
          delete this.initParamData[i]
        }
      }
      if (this.resetBackFn) this.resetBackFn()
      this.formInline = JSON.parse(JSON.stringify(this.initParamData))
      this.getList()
    },
    openUpdate(item) {
      this.openDrawer(item)
    },
    // 分页
    handleSizeChange(val) {
      this.formInline.limit = val;
      this.formInline.page = 1
      this.getList();
    },
    handleCurrentChange(val) {
      this.formInline.page = val;
      this.getList();
    },

  },
  created() {
    this.deleteNameList = this.deleteRowList
  },
  mounted() {
    if (this.paramObj) {
      for (let i in this.paramObj) {
        this.$set(this.formInline, i, this.paramObj[i])
      }
    }
    this.initParamData = JSON.parse(JSON.stringify(this.formInline))
    this.getList()
  }
}
</script>

<style scoped lang="scss">
.ty-table {
  width: 100%;
  height: 100%;

  ::v-deep .el-table__cell {
    text-align: center;
  }

  .el-table th.el-table__cell > .cell {
    text-align: center;
  }

  .el-table td.el-table__cell div {
    text-align: center;
  }

  ::v-deep .demo-form-inline {
    box-sizing: border-box;

    .el-form-item {
      margin-bottom: 10px;
    }
  }

  .ty-page {
    margin-top: 20px;
    background-color: #fff;
    height: 40px;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;

    .el-pagination {
      height: 30px;
    }


    /* 修改前后箭头未点击时的背景颜色 */
    :deep .el-pagination .btn-prev,
    :deep .el-pagination .btn-next {
      background-color: #fff !important;
      border: 1px solid rgba(224, 224, 224, 0.75);
    }

    /* 修改未点击时的数字方块背景颜色 */
    :deep .el-pagination .el-pager li:not(.active):not(.disabled):hover {
      background-color: #fff !important;
      border: 1px solid rgba(224, 224, 224, 0.75);
    }

    /* 未点击时的数字方块背景颜色 */
    :deep .el-pagination .el-pager li:not(.active):not(.disabled) {
      background-color: #fff !important;
      border: 1px solid rgba(224, 224, 224, 0.75);
    }

    :deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
      border: 1px solid rgba(224, 224, 224, 0.75);
    }


  }
}

</style>
